<template>
  <div class="index">
    <div class="wrap">
      <!-- <div class="crumbs flex"><div class="p">首页</div><div class="p" v-if="parent.meta">>{{ parent.meta.title }}</div><div class="p">>{{title}}</div></div> -->
      <div class="title">活动报名
        <!-- <div class="qrcode" ref="qrCodeUrl"></div> -->
      </div>
      <div class="eform">
        <el-form
          :label-position="labelPosition"
          :rules="rules"
          label-width="80px"
          ref="formLabelAlign"
          :model="formLabelAlign"
        >
          <!-- <el-form-item label="真实姓名" prop="name">
            <el-input
              v-model="formLabelAlign.name"
              placeholder="请输入真实姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="单位名称" prop="companyName">
            <el-input
              v-model="formLabelAlign.companyName"
              placeholder="请输入单位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="职务" prop="position">
            <el-input
              v-model="formLabelAlign.position"
              placeholder="请输入职务"
            ></el-input>
          </el-form-item>
          <el-form-item label="部门" prop="deptName">
            <el-input
              v-model="formLabelAlign.deptName"
              placeholder="请输入部门"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="formLabelAlign.phone"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证码" class="y" prop="validCode">
            <el-input
              v-model="formLabelAlign.validCode"
              placeholder="请输入验证码"
            ></el-input>
            <el-button class="sbtn" @click="send" type="success" :disabled="!show">
              获取验证码
              <span v-show="!show" class="count">({{ count }}s)</span>
            </el-button>
          </el-form-item>
          <el-button class="btn" type="primary" @click="submitForm('formLabelAlign')">提交</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { signapply } from "@/api/service/service";
import { sendValidCode } from '@/api/register'
import { Notification, MessageBox, Message } from 'element-ui'
import QRCode from 'qrcodejs2'
const TIME_COUNT = 60; //更改倒计时时间
export default {
  name: "index",
  data() {
    return {
      labelPosition: "right",
      show: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      formLabelAlign: {
        phone: "",
        validCode: "",
      },
      codereq:{
        type:1,
        scene:"sign",
        areaCode:"086",
        phone:"",
        email:""
      },
      rules: {
          phone: [
            { required: true, message: '请输入电话', trigger: 'change' }
          ],
          validCode: [
            { required: true, message: '请输入验证码', trigger: 'change' }
          ]
        }
    };
  },
  created() {
    this.id=this.getQueryString("id");
    this.formLabelAlign.activeId = this.getQueryString("id");
  },
  mounted() {
    this.parent = this.$route.matched[0];
    this.title = this.$route.meta.title;
  },
  methods: {
    togNav(e) {
      //
      this.$router.push(e);
    },
    getQueryString(name) {
      let reg = `(^|&)${name}=([^&]*)(&|$)`;
      let r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    addActivitySignapi() {
      signapply(this.formLabelAlign).then((res) => {
        console.log(res)
        if(res.resp_code === 0){
          this.formLabelAlign.phone = "";
          this.formLabelAlign.validCode = "";
          Message({
            message: res.resp_msg,
            type: 'success'
          })
        }else{
          //resp_msg
          Message(res.resp_msg)
        }
      });
    },
    curPage(e) {
      
    },
    send() {
      if(this.formLabelAlign.phone){
        this.codereq.phone = this.formLabelAlign.phone;
        sendValidCode(this.codereq).then(res=>{
        })
        if (!this.timer) {
          
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer); // 清除定时器
              this.timer = null;
            }
          }, 1000);
        }
      }
      
    },
    submitForm(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.addActivitySignapi()
          } else {
            return false;
          }
        });
    }
  },
};
</script>
<style scoped>
.index {
  background: #f7f7f7;
}
.wrap {
  padding: 50px 0;
}
.title {
  font-size: 28px;
  text-align: center;
  
  padding: 25px 0;
  color: #333333;
  position: relative;
}
.title .qrcode{
  position: absolute;
  top:12px;
  right: 400px;
  width: 60px;
  height: 60px;
}
.eform {
  width: 1200px;
  box-sizing: border-box;
  background: #fff;
  padding: 75px;
  box-shadow: 0px 5px 29px 6px rgba(102, 89, 115, 0.06);
  border-radius: 10px;
  text-align: center;
}
.y .sbtn{
  position: absolute;
  right: 0;

  background: #3DABC4;
  border-color: #3DABC4;
}
.btn{
  width: 295px;
  height: 50px;
  font-size: 20px;
  margin: 20px auto 0;
  background: #3DABC4;
}
</style>